<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/mystyle.css}" media="all">
    <script th:src="@{/js/jquery-1.8.3.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/cities.js}" type="text/javascript"></script>
    <script language="javascript" th:src="@{/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
    <style>
        .content {
            position: relative;
        }

        .carousel {
            position: relative;
            width: 600px;
            height: 272px;
            margin: 0 auto;
        }

        .carousel>div:first-child {
            overflow: hidden;
            width: 800px;
            height: 350px;
        }

        .carousel img {
            width: 800px;
            height: 350px;
        }

        .item ul {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%)
        }

        .item ul li {
            list-style: none;
            width: 50px;
            height: 15px;
            background: rgba(0, 0, 0, 0.3);
            margin: 0 20px;
        }

        .active {
            background: orangered !important;
        }

        .left,
        .right {
            position: absolute;
            width: 30px;
            height: 60px;
            border: 1px solid #000;
            font-weight: 900;
            font-size: 22px;
            line-height: 60px;
            text-align: center;
        }

        .left {
            left: -35px;
            top: 50%;
            transform: translateY(-50%);
        }

        .right {
            right: -35px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <!--header-->
    <header id="header">
        <hgroup>
            <address class="text blue">
                <p th:if="${session.customer==null}">
                    <a id="login" th:href="@{/home/login}">登录</a>&nbsp; | &nbsp;
                    <a id="register" target="_blank" th:href="@{/home/register}">注册</a>
                </p>
                <p th:if="${session.customer!=null}">
                    欢迎您，<span th:text="${session.customer.username}"></span>
                    &nbsp;&nbsp;<a th:href="@{/home/logout}">退出</a>
                </p>
            </address>
            <div class="clear"></div>
        </hgroup>
    </header>
    <!--end header-->

    <!--menu-->
    <menu id="menu">
        <nav>
            <ul class="menu_index">
                <a th:href="@{/home/customerinfo}">
                    <li id="menu-myceair">我的信息<i></i></li>
                </a>
                <a th:href="@{/home/index}">
                    <li id="menu-booking" class="current">预订行程<i></i></li>
                </a>
            </ul>
        </nav>
    </menu>
    <!--end content-->

    <!-- 第一个下拉菜单 -->
    <section class="menu-dropdown" id="dropdown-booking" style=" display: block;">
        <hgroup id="booking">
            <form th:action="@{/home/flight}" method="post">
                <article id="tabTicket" class="b_content block">
                    <ul class="category">
                        <li rel="tabTicket">机票预定</li>
                    </ul>
                    <div class="error_msg red"></div>
                    <dl class="form-field">
                        <dt>出发地<br>
                            <span class="city_box">
                                <input type="text" name="startPlace" id="deptCd" class="input city" value="上海"
                                    onKeyUp="input_keyup();" onClick="append_city(this.id);" onBlur="input_blur()"
                                    onFocus="if(value=='上海'){value='';style.color='#606060';}">
                                <input class="text" id="hid_city_name" name="index_city" style="display: none">
                                <input class="text" id="hid_real_city_name" name="real_index_city"
                                    style="display: none">
                            </span>
                        </dt>
                        <dd>目的地<br>
                            <span class="city_box"> </span>
                            <input type="text" name="endPlace" id="arrDd" class="input city" value="广州"
                                onKeyUp="input_keyup();" onClick="append_city(this.id);" onBlur="input_blur()"
                                onFocus="if(value=='广州'){value='';style.color='#606060';}">
                        </dd>
                    </dl>
                    <dl class="form-field">
                        <dt>
                            <input type="text" name="startDate" id="d422" class="input date Wdate"
                                onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
                        </dt>
                    </dl>
                    <p class="btn">
                        <input type="submit" class="button-blue" name="search" id="btn_member_search" value="立刻查询">
                    </p>
                </article>
            </form>
        </hgroup>
    </section>
    <div class="bottom_banner">
    </div>
    <section class="primary-promotion">
         <div class="cover">
             <img src="/images/paris_eiffel-tower-seen-from-street_600x272.jpg" alt="">

         </div>

        <div class="description">
            <div class="destination-medium-up">
                <span class="country">巴黎,</span> <span class="region">法国</span>
            </div>
            <div class="item">
                <div class="group">
                        <div class="type">机票CNY3,430起</div>
                    </a>
                    <div class="miscellenous">特选经济舱</div>
                </div>
            </div>
        </div>
        
        <div class="secondary-promotions">
            <ul>
                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p1.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">上海</div>
                        
                            <div class="category">机票</div>
                            <div class="price"><b>CNY1,045</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>
                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p2.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">西安</div>
                        
                            <div class="category">机票</div>
                            <div class="price"><b>CNY1,080</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>

                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p3.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">昆明</div>
                       
                            <div class="category">机票</div>
                            <div class="price"><b>CNY345</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>
            </ul>
            <ul style=" padding-top:50px;">
                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p4.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">广州</div>
                        
                        
                            <div class="category">机票</div>
                            <div class="price"><b>CNY689</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>
                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p5.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">北京</div>
                        
                            <div class="category">机票</div>
                            <div class="price"><b>CNY2,090</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>

                <li class="item1">
                    <div class="cover-img"><i class="icon icon-flight-contrary" aria-hidden="true" lang="en"></i> <img
                            src="/images/p6.png" alt="票价由3,500元*起" width="134" height="140"></div>
                    <div class="information">
                        <div class="title">南京</div>
                        
                            <div class="category">机票</div>
                            <div class="price"><b>CNY1,150</b>起</div>
                        
                        <div class="cabin-class">经济舱</div>
                    </div>
                </li>
            </ul>
        </div>
    </section>

    <script type="text/javascript">
        $("#btn_flight_search").click(function () {
            if ($("#flight_form").valid()) {
                $.ajax({
                    type: "post",
                    url: "validateflight.action",
                    data: {
                        startPoint: $("#deptCd").val(),
                        endPoint: $("#arrDd").val(),
                        day: $("#day").val(),
                        companyName: $("#companyName").val()
                        ,
                        flightNumber: $("#flightNumber").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            $("#flight_form").submit();
                            postForm();
                        }
                        else {
                            alert("无该航线的航班");
                        }
                    }
                });
            }
        });
        
    </script>
</body>

</html>